<template>
    <div>
      <header-title :title="title"></header-title>
      <div class="order_content">
        <mu-tabs :value.sync="num" color="#1296db" indicator-color="yellow" full-width>
          <mu-tab>全部</mu-tab>
          <mu-tab>待付款</mu-tab>
          <mu-tab>待接单</mu-tab>
          <mu-tab>配送中</mu-tab>
          <mu-tab>已配送</mu-tab>
        </mu-tabs>
        <div class="tabCon flex_center" >
          <div class="bodyContent">
          <!--列表搞个子组件-->
            <loading v-if="showLoading"></loading>
            <div class="list" v-if="!showLoading">
              <mu-paper :z-depth="1" class="demo-loadmore-wrap" v-bind:style="{height:conH}">
                <mu-container ref="container" class="demo-loadmore-content" >
                  <mu-load-more @refresh="refresh" :refreshing="refreshing" :loading="loading" @load="load">
                    <mu-list>
                      <template v-for="(order,index) in orderList" v-if="orderList.length > 0" >
                        <div class="orderContent">
                          <div class="order_pad flex flex_column">
                            <div class="order_top flex flex_between" style="color: #232326">
                              <p>订单号：<span>{{order.order_sn}}</span></p>
                              <p class="status_text">{{order.status_text}}</p>
                            </div>
                            <div class="order_center flex flex_between" @click="toOrderDetail(order)" v-for="good in order.order_goods">
                              <div class="center_left flex">
                                <img :src="good.goods_img" style="margin-right: 0.3rem">
                                <div class="center_left_text p_color" style="font-size: 0.8rem">
                                  {{good.goods_name}}
                                </div>
                              </div>
                              <div class="order_right p_color" style="margin-left: 1rem">
                                <p>￥<span>{{good.goods_price}}</span></p>
                                <p>x<span>{{good.goods_num}}</span></p>
                              </div>
                            </div>
                            <div class="order_foot p_color flex flex_column">
                              <div class="foot_p flex flex_end flex_vertical_center" style="font-size: 0.8rem;padding: 0.2rem">共计
                                <p style="color: #ef1336">{{order.order_goods.length}}</p>件商品，合计
                                <p style="color: #ef1336">{{order.order_amount}}</p>
                                元</div>
                              <div class="foot_p flex flex_end">
                                <!--待付款-->
                                <div class="" v-if="order.status == 10 &&  order.dispatch <= 0"> <!---->
                                  <span class="cancel" v-if="order.type == 1" @click="cancleOrder(order,index)" style="color: #333">取消订单</span>
                                  <p v-if="order.type == 0"> <!---->
                                    <span class="cancel" @click="cancleOrder(order,index)" style="color: #333">取消订单</span>
                                    <span class="pay" v-if="order.show_pay == 1" @click="payOrder(order)">付款</span> <!---->
                                  </p>
                                </div>
                                <!--催单-->
                                <a :href="'tel:'+order.contact" style="color: #333;margin-left: 0.5rem">
                                  <span class="hurry" v-if="order.show_cd == 1 && (num == 2 || num == 3)">催单</span>
                                </a> <!---->
                                <span class="hurry" v-if="num == 4">已完成</span> <!---->
                              </div>
                            </div>
                          </div>
                        </div>
                      </template>

                        <div class="flex_center order_none" v-if="has_more == true">
                          <div class="">
                            <p style="font-size: 1rem">您暂时没有相关订单</p>
                            <p style="padding: 1rem">去商城看看？</p>
                            <router-link :to="'/qds/mall'" v-on:click="changePage(4)">
                              <mu-container class="button-wrapper" >
                                <mu-flex justify-content="center" align-items="center">
                                  <mu-button round color="primary">立即去商城</mu-button>
                                </mu-flex>
                              </mu-container>
                            </router-link>
                          </div>
                        </div>

                    </mu-list>
                  </mu-load-more>
                </mu-container>
              </mu-paper>
            </div>
          </div>
        </div>
        <mu-bottom-sheet :open.sync="open">
          <mu-list>


            <div class="choose-tickt">
              <div class="tickt_img">
                <img :src="choose_tickt.goods_img">
              </div>
              <div class="tickt_des_top">
                <h4 style="font-weight: bold">{{choose_tickt.goods_name}}</h4>
                <p>原价：<span class="big_num">{{choose_tickt.goods_price}}</span>元</p>
                <p>水票价：<span class="big_num des_col">{{meal_total_price}}</span>元/ <span class="big_num des_col">{{meal_total_num}}</span>桶, 省<span class="big_num des_col">{{meal_default_price}}</span>元</p>
                <p v-if="meal_descrite != ''">额外赠送: {{meal_descrite}}</p>
              </div>
            </div>
            <p style="padding: 0.5rem">水票套餐选择</p>
            <div class="meal_all">
              <div class="choose_cate" v-for="(cate, index) in choose_tickt.waterbill_category" @click="chooseTickt(choose_tickt,cate,index)">
                <!--<mu-list-item button>
                  <p class="meal" :class="{meal_choose:index == 0}">{{cate.title}}</p>
                </mu-list-item>-->
                <mu-button class="meal" flat :class="{meal_choose:index == choose_index}">
                  <span :class="{text_animate:cate.title.length > 10}">{{cate.title}}</span></mu-button>  <!---->
              </div>
            </div>
          </mu-list>
          <mu-button color="error" @click="closeBottomSheet" class="sure_button">确定购买</mu-button>
        </mu-bottom-sheet>
        <footer-app :type=4 v-on:type="type"></footer-app>
      </div>
    </div>
</template>

<script>

  import footerApp from './../public_components/foot'

  import headerTitle from '../headerTilte'
  import Loading from "../../components/loading";

    export default {
      data(){
        return{
          showLoading:true,
          title:'订单管理',
          pageSize:50,
          tabs: ["全部",'待付款','待接单','配送中','已配送'],
          num: 0,
          orderList:[], //订单
          order_none:false,
          totalpage:0,
          refreshing: false,
          loading: false,
          page:1,
          conH:'600px',
          has_more:false,
          open: false,
          choose_tickt:'',//表示当前准备购买的水票
          choose_index:0,
          meal_total_price:0,
          meal_total_num:0,
          meal_default_price:0,
          meal_descrite:'',
          shop_mobile:'',
        }
      },
      mounted(){
        this.checkLogin();
        this.initList(1);
        this.$nextTick(function(){
          var allh = document.documentElement.clientHeight;
          var h1 = $('.mu-tabs').height();
          var headerH = $('.header').outerHeight(true);
          var footH = $('.foot').height();
          var h = allh - h1 - footH - headerH;

          this.conH = h + 'px';
        })
      },
      methods: {
        type: function (type) {
          this.type = type
        },

        initList(page){
          this.order_none = false;

          var num = parseInt(this.num) + 1;
          this.yesS.getOrderList(
            this.$combineParams({
              page:page,type:num
            })
          ).then(res => {
            this.loading = false

            this.shop_mobile = res.data.contact;
            var objs = res.data.order_list;
            if(page == 1){
              this.has_more = false
              this.orderList = objs.data;
            }else if(this.has_more == false){
              this.orderList = this.orderList.concat(objs.data);
            }

            this.page = page+1;
            if(objs.last_page <= objs.current_page){
              this.loading = false;
              this.has_more = false;
            }
            if(this.orderList.length <= 0){
              this.has_more = true;
            }
            this.showLoading = false
          })
        },

        refresh () {

          this.refreshing = true;
          this.$refs.container.scrollTop = 0;
          setTimeout(() => {
            this.refreshing = false;
            this.initList(1);
          }, 2000)
        },
        load () {
          this.loading = true;
          this.initList(this.page);
          setTimeout(() => {
            this.loading = false;
            /*this.num += 10;*/
          }, 2000)

        },
        closeBottomSheet () {
          this.open = false;
        },
        openBotttomSheet (obj) {
          this.choose_tickt = obj;
          this.choose_index = 0;
          this.open = true;
          this.meal_descrite = obj.waterbill_category[0].description;
          this.meal_total_price = obj.waterbill_category[0].buy_num * obj.goods_price;
          this.meal_total_num = obj.waterbill_category[0].total_num;
          this.meal_default_price = obj.waterbill_category[0].gift_num * obj.goods_price;
          this.meal_descrite = obj.waterbill_category[0].description
        },
        chooseTickt(tickt,type,index){
          this.choose_index = index;
          this.meal_total_price = type.buy_num * tickt.goods_price;
          this.meal_total_num = type.total_num;
          this.meal_default_price = type.gift_num * tickt.goods_price;
          this.meal_descrite = type.description

        },
        //取消订单
        cancleOrder(obj,index) {
          if(this.isEmpty(this.shop_mobile)){
            this.$toast.warning('该订单暂时无法取消');
            return;
          }

          this.$confirm('取消订单需联系商家，联系方式：'+this.shop_mobile, '提示', {
            type: 'warning'
          }).then(({ result }) => {
            if (result) {

              window.location.href = "tel:" + this.shop_mobile;
            } else {


            }
          });
        },


        //付款
        payOrder(obj){
          this.$confirm('确认支付？', '提示', {
            type: 'warning'
          }).then(({ result }) => {
            if (result) {
              //调起微信支付页面
              /*console.log('确认支付调的方法')*/
              this.sureOderPay(obj);

            } else {
              /*console.log('quxiao')*/
            }
          });
        },
        sureOderPay(obj){
          this.yesS.orderPay(
            this.$combineParams({order_id: obj.id})
          ).then(res => {
            var status = res.status;
            if(status == 1){
              this.payment(res.data);
            }
          })
        },
        payment(data) {
          this.wxPay(data, 1);
        },
        isPaySuccess(data){
          this.yesS.isPaySuccess(
            this.$combineParams({id:data.id})
          ).then(res => {
            var status = 0;
            if (res.data.result != undefined) {
              status = res.data.result;
            }
            if (status) {
              this.$router.push({path:'/qds/success',query:{toType:1}});
            } else {
              this.$router.push({path:'/qds/fail',query:{toType:2}});
            }
          }).catch(res => {
            this.$toast.error('支付失败，请稍后再试')
          })
        },

        //订单详情
        toOrderDetail(obj){
          console.log(obj)
          this.$router.push({path:'/qds/orderDetail',query:{id:obj.id,num:this.num,contact:this.shop_mobile}})
        }

      },
      filters: {
        numFilter(value) {
          // 截取当前数据到小数点后两位
          let realVal = Number(value).toFixed(0)
          // num.toFixed(2)获取的是字符串
          return Number(realVal)
        }
      },
      watch:{
        //tab num发生变化
        num:{
          handler(curVal,oldVal){
            this.num = curVal
            console.log(this.num)
            this.$refs.container.scrollTop = 0; //回到顶部
            this.showLoading = true;
            this.initList(1);
          },
          deep:true
        },
      },
      components:{
       /* loading_text,*/
        Loading,
        footerApp,
        headerTitle
      }
    }
</script>

<style lang="less">
  @import '../order/css/listCss.css';
  @import "../order/css/orderList.css";
  /*@import 'http://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.css';*/
  .demo-loadmore-wrap {
    width: 100%;
    max-width: 700px;
   /* height: 420px;*/
    display: flex;
    flex-direction: column;
    .mu-appbar {
      width: 100%;
    }
  }
  .demo-loadmore-content {
    flex: 1;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  .header{
    z-index: 999;
    box-shadow: 0 0 0;
  }

  /*.order_content{
    margin-top: 2.7rem;
  }*/

  .mu-tab-link-highlight{
    background-color: #1296db;
  }
  .mu-secondary-text-color{
    color: #1296db;
  }
  .mu-tab-wrapper{
    padding: 10px;
    min-height:38px
  }

  .order_content .container{
    padding: 0 !important;
  }

</style>
